<template>
	<view :class="pageClass" :style="pageStyle" v-if="pageReady">
		<moxi-nav :set="navSet"></moxi-nav>
		
		<view style="background: linear-gradient(to right,#19afff,#0055ff);color: #fff;padding: 10px;text-align: center;">
			<view style="font-size: 24px;font-weight: 600;display: flex;flex-direction: column;
			justify-content: center;margin-bottom: 10px;">
			
				<text style="font-size: 16px;">只需要您填写几个关键数据</text>
				<text style="font-size: 16px;">在线<text style="color:red;font-weight: 600;font-size: 21px;">免费</text>生成投资估算报告</text>
				<text style="font-size: 16px;">我们提供<text style="color:red;font-weight: 600;font-size: 21px;;">免费</text>报告咨询服务</text>
			</view>
			<!-- <u-line></u-line> -->
			<!-- <view style="padding: 10px;text-align: center">
				<text :style="'color: '+app_color" class="hint">免费使用</text>
			</view> -->
		</view>
		<view style="border-radius: 5px;margin-top: 10px;background: #fff;">
			<view class="input-list">
				<u-input placeholder="生产/仓储计划建设面积" v-model="info.e4" type="number">
					<u--text
										text="㎡"
										slot="suffix"
										margin="0 3px 0 0"
										type="tips"
									></u--text>
				</u-input>
			</view>
		<view class="input-list">
				<u-input placeholder="办公/研发计划建设面积" v-model="info.e5" type="number">
					<u--text
										text="㎡"
										slot="suffix"
										margin="0 3px 0 0"
										type="tips"
									></u--text>
				</u-input>
		</view>
		<view class="input-list">
				<u-input placeholder="宿舍/食堂计划建设面积" v-model="info.e6" type="number">
					<u--text
										text="㎡"
										slot="suffix"
										margin="0 3px 0 0"
										type="tips"
									></u--text>
				</u-input>
		</view>
			<view class="input-list">
					<u-input placeholder="人防地下室计划建设面积" v-model="info.e7" type="number">
						<u--text
											text="㎡"
											slot="suffix"
											margin="0 3px 0 0"
											type="tips"
										></u--text>
					</u-input>
			</view>
			
			<view class="input-list">
					<u-input placeholder="非人防地下室计划建设面积" v-model="info.e8" type="number">
						<u--text
											text="㎡"
											slot="suffix"
											margin="0 3px 0 0"
											type="tips"
										></u--text>
					</u-input>
			</view>
			<view class="input-list">
					<u-input placeholder="其它配建（门卫、配电房、消防控制室等)" type="number"
					 v-model="info.e9">
						<u--text
											text="㎡"
											slot="suffix"
											margin="0 3px 0 0"
											type="tips"
										></u--text>
					</u-input>
			</view>
			<view class="input-list">
					<u-input placeholder="土地面积" type="number"
					 v-model="info.e11">
						<u--text
											text="㎡"
											slot="suffix"
											margin="0 3px 0 0"
											type="tips"
										></u--text>
					</u-input>
			</view>
			<view class="input-list">
					<u-input placeholder="土地总价" type="number"
					 v-model="info.g11">
						<u--text
											text="万元"
											slot="suffix"
											margin="0 3px 0 0"
											type="tips"
										></u--text>
					</u-input>
			</view>
			<view class="input-list">
					<u-input placeholder="邮箱地址,用于接收报告"
					 v-model="info.email">
						
					</u-input>
			</view>
			<u-line></u-line>
			<view style="padding: 10px;">
				<u-button text="生成报告" :color="app_color" @click="start()"></u-button>
			</view>
		</view>
		<u-popup :show="show" @close="close" :round="10" >
			<view style="padding: 10px;display: flex;
			flex-direction: column;
			justify-content: center;align-items: center;">
				<view style="display: flex;flex-direction: row;color: #55aa7f;">
					<u-icon name="checkbox-mark" size="28" color="#55aa7f"></u-icon>
					<text style="margin-left: 10px;font-size: 24px">生成报告成功！</text>
				</view>
				<view style="width: 80%;margin-top: 20px;;">
					<!-- #ifdef H5 -->
					<a :href="pdf" download="报告.pdf">
						<u-button text="下载保存" :color="app_color"></u-button>
						</a>
					<!-- #endif -->
					<!-- #ifndef H5 -->
					<u-button text="下载保存" :color="app_color" @click="save()"></u-button>
					<!-- #endif -->
				</view>
			</view>
		</u-popup>
		<moxi-tabbar :set="tabbar" v-if="tabbar.index_id"></moxi-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:{
					e4:"",
					e5:"",
					e6:"",
					e7:"",
					e8:"",
					e9:"",
					e11:"",
					g11:"",
					email:""
				},
				show:false,
				pdf:"",
				img:""
			}
		},
		created(){
		
		},
		methods: {
			close(){
				this.show = false;
			},
			start(){
				this.moxiPost('/plugin/r101/index/doc/info',this.info,(data)=>{
					this.pdf = this.moxiConfig('domain')+'/'+data.data.pdf;
					this.show = true;
				})
			},
			save(){
				let self = this;
				uni.downloadFile({
					url: this.pdf, //仅为示例，并非真实的资源
					success: (res) => {
						if (res.statusCode === 200) {
							self.saveFile(res.tempFilePath)
						}else{
							this.msg('下载失败')
						}
					}
				});
			},
			saveFile(tempFilePath){//保存到本地
			let self = this;
				// #ifdef MP-BAIDU
				//文件保存到本地
				uni.saveFile({
					tempFilePath:tempFilePath,//临时路径
					success:res=>{
						uni.showToast({
							icon:'none',	
							mask:true,
							title:'文件已保存'+res.savedFilePath,//保存路径
							duration:3000
						})
						
						//打开文档查看
						uni.openDocument({
							filePath:res.savedFilePath,
							success:res=>{
								console.log('打开文档成功');
							}
						})
						
					}
				})
				// #endif
				
				// #ifdef MP-WEIXIN
				    const FileSystemManager = wx.getFileSystemManager()
					FileSystemManager.saveFile({
						tempFilePath:tempFilePath,
						success(res){
							self.msg("保存成功，即将打开文件！")
					//打开文档查看
					uni.openDocument({
						filePath:res.savedFilePath,
						success:res=>{
							console.log('打开文档成功');
						}
					})
						}
					})
				// #endif
			}

		}
	}
</script>

<style>
.input-list{
	margin:10px;
}
.hint{
	padding: 5px 20px;border-radius: 25px;background: rgba(255, 255, 255, 0.7);color: #fff;font-size: 12px;
}
</style>
